<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <div class="page-control">
        <a-form-model layout="inline" :model="merForm">
          <a-form-model-item label="企业用户号">
            <a-input v-model="merForm.merNo"></a-input>
          </a-form-model-item>
          <a-form-model-item label="操作流水号">
            <a-input v-model="merForm.reqJournalNo"></a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              type="primary"
              style="margin-right: 15px"
              @click="checkFenMer"
              >银联商户信息查询</a-button
            >
            <a-button
              type="primary"
              style="margin-right: 15px"
              @click="checkFen"
              >出款操作记录查询</a-button
            >
            <a-button @click="clearTable">清空</a-button>
          </a-form-model-item>
        </a-form-model>
        <a-button type="primary" @click="addAccount" style="margin-left: 15px">
          申请开户
        </a-button>
      </div>
      <a-table
        v-show="merVisible"
        :columns="merColumns"
        :data-source="merData"
        :loading="merLoading"
        :pagination="false"
      ></a-table>
      <a-table
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        style="margin-top: 20px"
      >
        <span slot="options" slot-scope="text, record">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1" @click="selfSign(record.id, 'C2B')">
                <span
                  style="width: 100%; text-align: center"
                  >C2B</span
                >
              </a-menu-item>
              <a-menu-item key="2" @click="selfSign(record.id, 'B2C')">
                <span
                  style="width: 100%; text-align: center"
                  >B2C</span
                >
              </a-menu-item>
              <a-menu-item key="3" @click="selfSign(record.id, 'B2B')"
                ><span
                  style="width: 100%; text-align: center"
                  >B2B</span
                >
              </a-menu-item>
            </a-menu>
            <a-button type="primary" style="margin-left: 8px">
              自助签约 <a-icon type="down" />
            </a-button>
          </a-dropdown>
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1" @click="updateSign(record.id, 'C2B')">
                <span
                  style="width: 100%; text-align: center"
                  >C2B</span
                >
              </a-menu-item>
              <a-menu-item key="2" @click="updateSign(record.id, 'B2C')">
                <span
                  style="width: 100%; text-align: center"
                  >B2C</span
                >
              </a-menu-item>
              <a-menu-item key="3" @click="updateSign(record.id, 'B2B')"
                ><span
                  style="width: 100%; text-align: center" 
                  >B2B</span
                >
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px;margin-top:10px;">
              查询 <a-icon type="down" />
            </a-button>
          </a-dropdown>
        </span>
      </a-table>

      <a-modal
        title="申请开户"
        :visible="visible"
        @cancel="onCancelModal"
        @ok="onSubmit"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item prop="name" label="营业名称" required>
            <a-input v-model="form.name"></a-input>
          </a-form-model-item>
          <a-form-model-item prop="userName" label="姓名" required>
            <a-input v-model="form.userName"></a-input>
          </a-form-model-item>
          <a-form-model-item prop="phone" label="手机号" required>
            <a-input v-model.number="form.phone"></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import {
  selfSign,
  selfSignList,
  addSelfSignAccount,
  updateSign,
  checkFenMer,
  checkFen,
} from "@/request/api";
import axios from "axios";
import moment from "moment";
export default {
  data() {
    let checkPvalidatorPhonehone = (rule, value, callback) => {
      const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!phoneReg.test(value)) {
        callback("请输入正确格式的手机号码");
        return; //校验不通过结束当前校验
      }
      callback(); //必须调用，参数为空视为校验通过
    };
    return {
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "自助签约", path: "/selfsign", query: {} },
      ],
      loading: false,
      merLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      visible: false,
      merVisible: false,
      form: {
        name: "",
        userName: "",
        phone: "",
      },
      rules: {
        name: [{ required: true, message: "请填写营业名称", trigger: "blur" }],
        userName: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          { validator: checkPvalidatorPhonehone },
        ],
      },
      merForm: {
        reqJournalNo: "",
        merNo: "",
      },
      data: [],
      merData: [],
      columns: [
        {
          title: "ID(来源平台账户/accesser_acct)",
          dataIndex: "id",
          key: "id",
          width: "200px",
        },
        {
          title: "营业名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "姓名",
          dataIndex: "userName",
          key: "userName",
          width: "120px",
        },
        {
          title: "手机号",
          dataIndex: "phone",
          key: "phone",
          width: "120px",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: "120px",
        },
        {
          title: "企业号",
          dataIndex: "companyNo",
          key: "companyNo",
          width: "120px",
        },
        {
          title: "商户号",
          dataIndex: "merNo",
          key: "merNo",
          width: "120px",
        },
        {
          title: "操作",
          dataIndex: "options",
          key: "options",
          slots: { title: "操作" },
          scopedSlots: { customRender: "options" },
          width: "200px",
        },
      ],
      merColumns: [
        {
          title: "测试集团号",
          dataIndex: "groupId",
          key: "groupId",
        },
        {
          title: "集团名称",
          dataIndex: "merName",
          key: "merName",
        },
        {
          title: "企业用户号",
          dataIndex: "merNo",
          key: "merNo",
        },
        {
          title: "分账金额",
          dataIndex: "payAmt",
          key: "payAmt",
        },
        {
          title: "可分账金额",
          dataIndex: "canPayAmt",
          key: "canPayAmt",
        },
        {
          title: "交易信息",
          dataIndex: "respMsg",
          key: "respMsg",
        },
      ],
      pagination: { current: 1, size: 10 },
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.selfSignList(1, 10);
  },
  methods: {
    addAccount() {
      this.visible = true;
    },
    async addSelfSignAccount() {
      let param = {
        name: this.form.name,
        phone: this.form.phone,
        userName: this.form.userName,
      };
      let { data } = await addSelfSignAccount(param);
      console.log(data);
      if (data.success) {
        this.onCancelModal();
        this.selfSignList(1, 10);
        this.$message.success("操作成功");
      } else {
        this.$message.error(data.content);
      }
    },
    async selfSign(id,value) {
      console.log(id);
      let param = "autoRegId=" + id + '&value=' + value;
      let { data } = await selfSign(param);
      console.log(data);
      if (data.success) {
        let url =
          "https://selfapply-test.chinaums.com/self-sign-web/#/verify?json_data=" +
          // "https://yinshangpai.chinaums.com/self-sign-web/#/verify?json_data=" +
          data.content.json_data +
          "&sign_data=" +
          data.content.sign_data +
          "&accesser_id=" +
          data.content.accesser_id
        window.open(url);
      } else {
        this.$message.error(data.content);
      }
    },
    async selfSignList(p, ps) {
      this.loading = true;
      let param = {
        p: p - 1,
        ps,
      };
      let { data } = await selfSignList(param);
      console.log(data);
      if (data.success) {
        this.loading = false;
        let pagination = { ...this.pagination };
        pagination.total = data.content.total;
        console.log(pagination);
        this.pagination = pagination;
        this.data = data.content.records;
      } else {
        this.loading = false;
        this.data = [];
      }
    },
    async updateSign(id,value) {
      let param = "autoRegId=" + id + '&value=' + value;
      let { data } = await updateSign(param);
      console.log(data);
      if (data.success) {
        console.log(data);
        this.$confirm({
          title: "签约进度：",
          content: data.content == null ? "暂无" : data.content,
        });
      } else {
        this.$message.error(data.content);
      }
    },
    async checkFenMer() {
      let param = {
        merNo: this.merForm.merNo,
        reqDate: moment().format("yyyyMMDD"),
        reqJournalNo: this.merForm.reqJournalNo,
      };
      this.merLoading = true;
      console.log(param);
      let { data } = await checkFenMer(param);
      console.log(data);
      if (data.success) {
        this.merLoading = false;
        let arr = [];
        data.content.canPayAmt =
          data.content.canPayAmt != null
            ? parseInt(data.content.canPayAmt) * 0.01
            : null;
        data.content.payAmt =
          data.content.payAmt != null
            ? parseInt(data.content.payAmt) * 0.01
            : null;
        arr.push(data.content);
        this.merData = arr;
        this.merVisible = true;
      } else {
        this.merLoading = false;
        this.merData = [];
      }
    },
    async checkFen() {
      let param = {
        merNo: this.merForm.merNo,
        reqDate: moment().format("yyyyMMDD"),
        reqJournalNo: this.merForm.reqJournalNo,
      };
      this.merLoading = true;
      console.log(param);
      let { data } = await checkFen(param);
      console.log(data);
      if (data.success) {
        this.merLoading = false;
        let arr = [];
        arr.push(data.content);
        this.merData = arr;
        this.merVisible = true;
      } else {
        this.merLoading = false;
        this.merData = [];
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.addSelfSignAccount();
        } else {
          return false;
        }
      });
    },
    onCancelModal() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.selfSignList(pager.current, pager.size);
    },
    clearTable() {
      this.merVisible = false;
      this.merData = [];
      this.merForm = {};
    },
  },
};
</script>
<style scoped>
.page-content {
  background-color: #fff;
  padding: 25px;
}
.page-control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
</style>